<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Load GLB Model</title>
  <style>
    body { margin: 0; overflow: hidden; }
    #three-container { width: 100vw; height: 100vh; }
  </style>
</head>
<body>
  <div id="three-container"></div>

  <!-- Three.js 主库 -->
  <script type="module">
    import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js';
    import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/loaders/GLTFLoader.js';
    import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/controls/OrbitControls.js';

    let scene, camera, renderer, controls;

    init();
    loadModel('f4.glb');
    animate();

    function init() {
      const container = document.getElementById('three-container');

      scene = new THREE.Scene();

      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(0, 2, 5);

      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      container.appendChild(renderer.domElement);

      controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;

      // 添加灯光
      const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
      scene.add(ambientLight);

      const dirLight = new THREE.DirectionalLight(0xffffff, 2);
      dirLight.position.set(10, 10, 10);
      scene.add(dirLight);
    }

    function loadModel(path) {
      const loader = new GLTFLoader();
      loader.load(
        path,
        (gltf) => {
          const model = gltf.scene;
          scene.add(model);
          console.log("模型加载完成:", model);
        },
        (xhr) => {
          console.log((xhr.loaded / xhr.total * 100).toFixed(2) + '% 已加载');
        },
        (error) => {
          console.error('模型加载失败:', error);
        }
      );
    }

    function animate() {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    }
  </script>
</body>
</html>
